<template>
  <div>
    <ul>
      <!--item 是具体的元素，index是数组下标-->
      <li v-for="(item,index) in lists"
          @click="choose(index)"
          :class="{active: index==current && current!==''}"
           :key="index">
        {{item}}
      </li>
    </ul>
    <button type="button" @click="add()">添加</button>
    <ul>
      <li v-for="(item,index) in target"  :key="index">
        {{item}}
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name: 'Demo1',
  data () {
    return {
      current: '',
      lists: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      target: []
    }
  },
  methods: {
    choose (index) {
      this.current = index
      console.log(index)
    },
    add () {
      if (this.current === '') { return }
      // 数组中放入这个元素
      this.target.push(this.lists[this.current])
      this.current = ''
    }
  }
}
</script>

<style scoped>
li.active{
  background: red;
}
</style>
